<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>人脸账户绑定</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div id="main-container">
    <div>
        <div>
            <div>
                <div id="layout">
					<div id="hint-text">
						<p>人脸绑定账号</p>
						<p>
							<button onclick="openMedia()">开启摄像头</button>
							<button onclick="closeMedia()">关闭摄像头</button>
						</p>
					</div>
					<div id="btns" style="display: none;"></div>
					<div id="_layout">
						<div class="collection">
							<form action="#" id="userInfo">
								<p>
									<label for="userName">账号：</label>
									<input type="text" name="userName" id="userName" placeholder="请输入账号" autocomplete="off">
								</p>
								<p>
									<label for="password">密码：</label>
									<input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off">
								</p>
							</form>
							<img id="imgTag" src="" alt=""/>
							<div>
								<p><span class="bold">打开摄像头</span>进行人脸识别登录</p>
								<button onclick="takePhoto()">绑定</button>
							</div>
						</div>
						<div class="camera">
							<div class="camera-info">
								<div class="style">
									<p>
										<span></span>
										<span></span>
									</p>
									<p>
										<span></span>
										<span></span>
									</p>
									<div class="camera-hint">请开启摄像头</div>
								</div>
								<video id="video" width="500px" height="500px" autoplay="autoplay">
								</video>
								<canvas id="canvas" width="500px" height="500px"></canvas>
							</div>
						</div>
					</div>
					
                    <script type="text/javascript" charset="UTF-8">
						(()=>{
							document.querySelector('#imgTag').setAttribute('src','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F71%2F355748a0c730a5d.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645619303&t=75562c550cebdd36e250c3f792445e01');
							// let width  = document.body.offsetWidth ;
							// let height = document.body.offsetHeight;
							// let main = document.querySelector("#main-container");
							// main.style = `width: ${width}px; height: ${height}px;`;
						})();
						
                        let mediaStreamTrack = null; // 视频对象(全局)
                        let video;
                        let URL = "http://127.0.0.1:8888/";
						let proAdd = "bigDateApi/";
						let itfAdd = "dataFace/faceCreate";
                        function openMedia() {
							document.querySelector('.camera-hint').style.display = 'none'; 	// 设置样式的
                            let constraints = {
                                video: {width: 500, height: 500},
                                audio: false
                            };
                            //获得video摄像头
                            video = document.getElementById('video');
                            let promise = navigator.mediaDevices.getUserMedia(constraints);
                            promise.then((mediaStream) => {
                                mediaStreamTrack = mediaStream.getVideoTracks()
                                video.srcObject = mediaStream;
                                video.play();
                            });
                        }

                        // 拍照
                        function takePhoto() {
                            //获得Canvas对象
                            let video = document.getElementById('video');
                            let canvas = document.getElementById('canvas');
                            let ctx = canvas.getContext('2d');
                            let userName = $("#userName").val();
                            let password = $("#password").val();
                            let regExpUN = /^[a-zA-Z0-9_]{4,15}$/;
                            let regExpPD = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*.]{6,18}$/;
							if(!regExpUN.test(userName) || !regExpPD.test(password) ){
								return false;
							}
                            ctx.drawImage(video, 0, 0, 500, 500);
                            // toDataURL  ---  可传入"image/png"---默认, "image/jpeg"
                            let img = document.getElementById('canvas').toDataURL();
                            // 这里的img就是得到的图片
                            //console.log('img-----', img);
                            document.getElementById('imgTag').src = img;
                            //上传
                            $.ajax({
                                url: URL + proAdd + itfAdd,
                                type: "POST",
                                data: {
                                	"descImg" : img,
									"userName": userName,
									"password": password
								},
                                success: function (result) {
									console.log(result);
									alert("绑定成功");
									window.open("./faceLogin.html", "_self");

									// if (result.code === 200) {
                                    // } else {
                                    //     alert("绑定失败");
                                    // }
                                    closeMedia();
									document.getElementById('imgTag').src = "https://gimg2.baidu.com/" +
											"image_search/" +
											"src=http%3A%2F%2Fbpic.588ku.com" +
											"%2Felement_origin_min_pic%2F01%2F60%2F71%2F355748a0c730a5d.jpg" +
											"&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg" +
											"?sec=1645619303&t=75562c550cebdd36e250c3f792445e01";
                                }
                            });

                        }

                        // 关闭摄像头
                        function closeMedia() {
							document.querySelector('.camera-hint').style.display = 'block';	// 设置样式的
                            let stream = document.getElementById('video').srcObject;
                            let tracks = stream.getTracks();
                            tracks.forEach(function (track) {
                                track.stop();
                            });
                            document.getElementById('video').srcObject = null;
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- ==========样式表========== -->
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
		box-sizing: border-box;
		vertical-align: top;
	}
	
	html,body{
		width: 100%;
		height: 100%;

	}
	
	#main-container{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191109%2F238a046ac5c89067cf8f41d883120136_00001.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645617836&t=5cc9f85d74734ffec824647007b4a2ca');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	
	#layout{
		width: 1200px;
		height: 650px;
		padding: 0 10px;
		background-color: rgba(0,255,255,0.3);
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	#hint-text{
		height: 12%;
		width: 100%;
		color: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#hint-text p{
		margin: 0 5px;
		width: 50%;
		text-align: center;
		padding: 10px 0;
		background-color: rgba(255,255,255,0.1);
		border-radius: 5px;
	}
	
	#hint-text p:first-child{
		background-color: rgba(255,255,255,0.5);
	}
	
	#hint-text p button{
		border: 0;
		padding: 5px 15px;
		border-radius: 2px;
		margin: 0 10px;
		cursor: pointer;
		font: 18px/100% "楷体";
	}
	
	#_layout{
		width: 100%;
		height: 85%;
		display: flex;
	}
	
	.collection{
		width: 50%;
		height: 100%;
		color: #FFF;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	
	.collection .switch-text a{
		color: rgb(0,175,227);
		padding: 0 5px;
	}
	
	#imgTag{
		transform: translate(0,50px);
		width: 170px;
		height: 200px;
		pointer-events: none;
		user-select: none;
	}
	
	.collection div{
		display: flex;
		width: 250px;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.collection div p{
		padding: 10px 0;
		width: 100%;
		text-align: center;
		background-color: rgba(255,255,255,0.5);
		border-radius: 5px;
	}
	
	.collection div p .bold{
		font-weight: bold;
		padding: 0 5px;
	}
	
	.collection div button{
		border: 0;
		padding: 10px 50px;
		cursor: pointer;
		font: 18px/100% "楷体";
		transform: translate(0,20px);
		border-radius: 5px;
	}
	
	.camera{
		width: 50%;
		height: 100%;
	}
	
	.camera-info{
		background-color: rgba(255,255,255,0.2);
		margin: 0 auto;
		width: 550px;
		height: 550px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.camera .style{
		position: absolute;
		width: 500px;
		height: 500px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.camera .style p{
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
	}
	
	.camera .style p span{
		border: 5px solid #FFF;
		width: 100%; 
		height: 30%;
	}
	.camera .style p:nth-child(1) span:nth-child(1){border-right:0;border-bottom: 0;}
	.camera .style p:nth-child(1) span:nth-child(2){border-right:0;border-top: 0;}
	.camera .style p:nth-child(2) span:nth-child(1){border-left: 0; border-bottom: 0;}
	.camera .style p:nth-child(2) span:nth-child(2){border-left: 0;border-top: 0;}
	
	.camera .style div{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: rgba(255,255,255,0.3);
		padding: 10px 50px;
		color: #FFF;
		font: 21px/100% "楷体";
		pointer-events: none;
		user-select: none;
	}
	#video{
		background-color: rgba(0,0,0,0.5);
	}
	
	#canvas{
		border: 1px solid;
		display: none;
	}

	#userInfo{
		/*border: 1px solid #F00;*/
		width: 50%;
	}
	#userInfo p{
		padding: 5px 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#userInfo p input{
		border: 0;
		padding: 5px 15px;
		outline: none;
		font: 16px/100% "";
	}
</style>
</body>
</html>
